<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不同显示类型的例子</title>
  <style>
      /*两个正外边距合并成一个外边距，其大小等于最大的单个外边距*/
      /*两个负外边距合并成一个外边距，其大小等于最小的单个外边距*/
      /*一正一负，外边距等于两个值相加*/
      .container {
          border: 2px solid blue;
      }
      p {
          border: 2px solid red;
      }
      .one {
          margin-bottom: 50px;
      }
      .two {
          margin-top: 30px;
      }
  </style>
</head>
<body>
<div class="container">
    <p class="one">I am paragraph one.</p>
    <p class="two">I am paragraph two.</p>
</div>
</body>
</html>